<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="500" height="450"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 3;
    ctx.font = 'italic bold 20px Times New Roman';
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.fillStyle = 'black';

    // --- Resistor R Block ---
    // Box
    ctx.strokeRect(50, 200, 100, 80);
    // Label R
    ctx.fillText('R', 60, 195);
    // Resistor symbol
    ctx.beginPath();
    ctx.moveTo(70, 240);
    ctx.lineTo(80, 220);
    ctx.lineTo(90, 260);
    ctx.lineTo(100, 220);
    ctx.lineTo(110, 260);
    ctx.lineTo(120, 220);
    ctx.lineTo(130, 240);
    ctx.stroke();

    // --- Capacitor Housing and Fixed Plates (P', P") ---
    ctx.beginPath();
    // Outer walls
    ctx.moveTo(250, 350); // bottom-left
    ctx.lineTo(450, 350); // bottom-right
    ctx.lineTo(450, 150); // top-right
    ctx.lineTo(250, 150); // top-left
    ctx.lineTo(250, 215); // down to connection point
    ctx.stroke();

    // Top structure with tubes
    ctx.beginPath();
    // P' tube
    ctx.moveTo(275, 150); ctx.lineTo(275, 50);
    ctx.moveTo(295, 150); ctx.lineTo(295, 50);
    ctx.fillText("P'", 285, 40);
    // P" tube
    ctx.moveTo(405, 150); ctx.lineTo(405, 50);
    ctx.moveTo(425, 150); ctx.lineTo(425, 50);
    ctx.fillText('P"', 415, 40);
    // P tube
    ctx.moveTo(340, 150); ctx.lineTo(340, 50);
    ctx.moveTo(360, 150); ctx.lineTo(360, 50);
    ctx.fillText('P', 350, 40);
    ctx.stroke();
    
    // Inner fixed structure (P" side)
    ctx.beginPath();
    ctx.moveTo(395, 150); // from top
    ctx.lineTo(395, 260); // right plate (P")
    ctx.lineTo(360, 260); // Ledge bottom
    ctx.stroke();


    // --- Movable Plate P and its flexible connection ---
    // Plate P Body
    ctx.beginPath();
    ctx.moveTo(350, 150);
    ctx.quadraticCurveTo(330, 190, 305, 210);
    ctx.quadraticCurveTo(290, 230, 295, 240); // Connection point bulge
    ctx.lineTo(295, 280); // Left side
    ctx.lineTo(375, 280); // Bottom side
    ctx.lineTo(375, 220); // Right side
    ctx.quadraticCurveTo(370, 170, 350, 150); // Right top curve
    ctx.stroke();

    // Flexible connector bellows
    ctx.beginPath();
    ctx.moveTo(295, 240);
    ctx.bezierCurveTo(285, 235, 275, 245, 265, 240);
    ctx.stroke();

    // Resistor r
    ctx.beginPath();
    ctx.moveTo(265, 240);
    ctx.lineTo(255, 235);
    ctx.lineTo(245, 245);
    ctx.lineTo(235, 235);
    ctx.lineTo(225, 240);
    ctx.stroke();
    ctx.fillText('r', 245, 255);

    // --- Connections ---
    // Connection from R to Housing (P'/P")
    ctx.beginPath();
    ctx.moveTo(150, 215); // From R box
    ctx.lineTo(250, 215); // To housing
    ctx.stroke();

    // Connection from R to Plate P (via r)
    ctx.beginPath();
    ctx.moveTo(150, 265); // From R box
    ctx.lineTo(180, 265); // To start of V0
    ctx.lineTo(225, 240); // To start of r
    ctx.stroke();
    
    // --- Labels ---
    // Label V₀
    ctx.font = 'italic 18px Times New Roman';
    ctx.fillText('V₀', 202, 268);
    ctx.font = 'italic bold 20px Times New Roman';
    // Left arrow-line
    ctx.beginPath();
    ctx.moveTo(180, 265);
    ctx.quadraticCurveTo(188, 260, 195, 260);
    // Arrowhead
    ctx.moveTo(195, 260);
    ctx.lineTo(192, 257);
    ctx.moveTo(195, 260);
    ctx.lineTo(198, 257);
    ctx.stroke();
    // Right arrow-line
    ctx.beginPath();
    ctx.moveTo(215, 245);
    ctx.quadraticCurveTo(215, 260, 210, 260);
     // Arrowhead
    ctx.moveTo(210, 260);
    ctx.lineTo(213, 257);
    ctx.moveTo(210, 260);
    ctx.lineTo(207, 257);
    ctx.stroke();


    // Label h
    ctx.beginPath();
    // vertical line
    ctx.moveTo(385, 260);
    ctx.lineTo(385, 280);
    // top arrow
    ctx.moveTo(380, 265);
    ctx.lineTo(385, 260);
    ctx.lineTo(390, 265);
    // bottom arrow
    ctx.moveTo(380, 275);
    ctx.lineTo(385, 280);
    ctx.lineTo(390, 275);
    ctx.stroke();
    ctx.fillText('h', 400, 270);

    // Figure Caption
    ctx.font = '20px "Times New Roman"';
    ctx.fillText('Fig. 1.53', 250, 400);

</script>
</body>
</html>